<!-- 登录 -->
<template>
    <div class="login">
        <!-- 头部 -->
        <div class="header">
            <router-link to="/Index">
                <van-icon name="arrow-left" size="20" />
            </router-link>
            <div class="hea-c">登录注册</div>
            <i class="iconfont iconfont-lb" @click="headerbarMenu">&#xe602;</i>
            <headerlb v-show="show"></headerlb>
        </div>
        <!-- logo  -->
        <div class="hualLogo">
            <img src="https://img02.hua.com/m/login/wx_login_logo.png" alt="">
        </div>
        <!-- 登录注册  -->
        <div class="huaLogin">
            <div class="login-item">
                <div class="login-item-title">手机号/邮箱</div>
                <div class="login-item-info">
                    <input type="text" class="phone" v-model="phone" placeholder="请输入手机号或邮箱">
                </div>
            </div>
            <div class="login-item">
                <div class="login-item-title">密码</div>
                <div class="login-item-info">
                    <input type="text" class="password" v-model="password" placeholder="请输入密码">
                    <div class="login-item-info-btn">忘记密码</div>
                </div>
            </div>
            <button class="login-btn" @click="handleLoginBtn">登录</button>
            <div class="login-password">手机短信登录</div>
        </div>
        <!-- 其他登录方式 -->
        <div class="quick">
            <div class="quick-tips">其他登录方式</div>
            <div class="quick-bubble"></div>
            <div class="quick-login">
                <div class="quick-login-item">
                    <i class="iconfont">&#xe73e;</i>
                    <span>QQ</span>
                </div>
                <div class="quick-login-item">
                    <i class="iconfont">&#xe607;</i>
                    <span>支付宝</span>
                </div>
                <div class="quick-login-item">
                    <i class="iconfont">&#xe61a;</i>
                    <span>邮箱注册</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headerlb from './components/HeaderLB.vue'
export default {
    name: "login",
    data() {
        return {
            phone: '18790896556',
            password: '020328',
            show: false
        }
    },
    components: {
        headerlb
    },
    methods: {
        headerbarMenu() {
            this.show = !this.show
        },
        handleLoginBtn() {
            this.$axios.post('/api/login', {
                phone: this.phone,
                password: this.password
            }).then(res => {
                let params = res.data.data
            if (!this.phone && !this.password) {
                alert("手机号密码不能为空")
            }else if(params.phone!=this.phone||params.password!=this.password){
                alert("手机号密码错误")
            }else if(params.password == this.password) {
                alert("登录成功")
                localStorage.setItem("phone",this.phone)
                this.$router.push("/My")
                this.$store.commit("changeLoing",1)
            }
        }).catch(err => {
            console.log(err)
        })
    }
}
}
</script>
<style scoped lang="less">
.login {
    background-color: #fff;
}

.header {
    display: flex;
    height: 1.14285714rem;
    justify-content: space-between;
    line-height: 1.14285714rem;
    align-items: center;
    padding: 0 0.3rem;
    position: relative;
}

.iconfont-lb {
    font-size: 20px
}

.hea-c {
    font-size: 0.3rem;
}

.hualLogo {
    text-align: center;
    margin-top: .3rem;
}

.hualLogo img {
    width: 3.14rem;
    height: 0.48rem;
    vertical-align: middle
}

.huaLogin {
    margin-top: 0.9rem;
    padding: 0 0.3rem;
}

.login-item {
    border-bottom: 0.02rem #e9ecf0 solid;
    margin-top: 0.4rem;
}

.login-item-info {
    margin-top: 0.24rem;
    display: flex;
    justify-content: space-between;
}

.login-item-info input {
    outline: none;
    border: none;
    padding: 0.1rem 0rem;
    // color: #ccc;
}

.login-item-info-btn {
    color: #71797f;
    margin-top: 0.2rem;
}

.login-btn {
    width: 100%;
    height: 0.8rem;
    border-radius: 1.5rem;
    background-color: #ff734c;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    margin-top: 0.8rem;
    font-size: 0.3rem;
}

.login-password {
    color: #71797f;
    text-align: center;
    margin-top: 0.8rem;
    font-size: 0.3rem;
}

.quick {
    margin: 1.5rem auto 0.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 89.4%;
}

.quick-tips {
    color: rgba(0, 0, 0, 0.2);
    width: 2rem;
    margin: -0.1rem auto 0.4rem;
    background-color: #fff;
    text-align: center;
}

.quick-login {
    height: 1.71428571rem;
    display: flex;
}

.quick-login-item {
    height: 100%;
    flex: 1;
    text-align: center;
    line-height: 1rem;
}

.quick-login-item .iconfont {
    color: #1CACEA;
    font-size: 0.5rem;
}

.quick-login-item span {
    margin-left: 0.3rem;
    font-size: 0.3rem;
}
</style>